<template>
  <div class="layout">
    <div class="layout-header bg_style border_style">
      <div>
        <YsDatePicker
          type="daterange"
          class="layout-header-date"
          :class="curTheme"
          placeholder="请选择统计周期"
          @on-change="handleChange"
          transfer
          placement="bottom-start"
        ></YsDatePicker>
        <Select
          style="width: 268px; margin-right: 10px"
          placeholder="请搜索选择项目"
          class="select-border"
          v-model="params.project_id"
        >
          <Option
            v-for="(item, index) in projectInfos"
            :value="item.id"
            :key="index"
            >{{ item.pd_name }}</Option
          >
        </Select>
        <YsButton type="primary" @click="handleSearch">查询</YsButton>
      </div>
      <div>
        <YsButton plain @click="exportData(0)">PNG下载</YsButton>
        <YsButton plain @click="exportData(1)" class="layout-header-btn">PDF下载</YsButton>
      </div>
    </div>
    <div class="layout-container bg_style border_style" v-if="tableFalg">
      <div class="container-main border_style" ref="print">
        <header-template :data="oneData" />
        <jc-result :data="jcData" />
        <jcsb-table :data="jcsbData" />
        <audit :data="auditData" />
      </div>
    </div>
    <div :class="curTheme" class="layout-nodata border_style" v-if="!tableFalg">
      <div class="default-box">
        <img class="default-img" src="../../assets/images/default2.png" alt="">
        <p>暂无数据</p>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapState, mapActions } from "vuex"
import { onExport  } from "@/utils/export.js"
import HeaderTemplate from "@/views/DefectAnalysis/components/projectReport/headerTemplate.vue"
import JcResult from "@/views/DefectAnalysis/components/projectReport/jcResult.vue"
import JcsbTable from "@/views/DefectAnalysis/components/projectReport/jcsbTable.vue"
import Audit from "@/views/DefectAnalysis/components/projectReport/audit.vue"
export default {
  name: "projectReport",
  computed: {
    ...mapState(["curTheme"]),
    ...mapGetters(["getCommData"]),
  },
  components: {
    HeaderTemplate,
    JcResult,
    JcsbTable,
    Audit
  },
  data() {
    return {
      projectInfos: [],
      params: {
        ent_no: "",
        end_time: "",
        start_time: "",
        project_id: "",
      },
      tableFalg: true,
      oneData: [
        {
          field_name: '设备编号',
          value: '1'
        },
        {
          field_name: '检测单位',
          value: '1'
        },
        {
          field_name: '项目名称',
          value: '1'
        },
        {
          field_name: '执行标准',
          value: '1'
        },
        {
          field_name: '委托制造单位',
          value: '1'
        },
        {
          field_name: '完成日期',
          value: '1'
        },
      ],
      jcData: [
        {
          form: [
            {
              field_name: '设备号/管线号',
              value: '1'
            },
            {
              field_name: '检测工艺',
              value: '1'
            },
            {
              field_name: '承压设备类别',
              value: '1'
            },
            {
              field_name: '焊缝坡口型式',
              value: '1'
            },
            {
              field_name: '热处理状态',
              value: '1'
            },
            {
              field_name: '检测部位',
              value: '1'
            },
            {
              field_name: '表面状态',
              value: '1'
            },
            {
              field_name: '焊口数量',
              value: '1'
            },
          ],
          data: []
        }
      ],
      jcsbData: [],
      auditData: [
        {
          field_name: '编制者',
          value: '1'
        },
        {
          field_name: '编制时间',
          value: '1'
        },
        {
          field_name: '审核者',
          value: '1'
        },
        {
          field_name: '审核时间',
          value: '1'
        }
      ]
    }
  },
  mounted() {
    let { ent_no } = this.getCommData
    this.params.ent_no = ent_no
    this.handleProjectList()
  },
  methods: {
    ...mapActions(["getPageQueryProjectAPI"]),
    // 查询报告数据
    handleSearch() {
      this.tableFalg = false
      // ...
      // this.tableFalg = true
    },
    // 导出报告
    exportData(flag) {
      onExport(flag, this.$refs.print, 'X射线探伤检测报告(项目版)')
    },
    // 获取项目下拉框列表
    handleProjectList() {
      let _this = this
      _this
        .getPageQueryProjectAPI({ limit_recd: 99999 })
        .then((res) => {
          let { data, msg, status } = res
          if (status === "ok") {
            this.projectInfos = data.projectInfos
          } else {
            _this.$YsMessage.error(msg)
          }
        })
        .catch((err) => {
          _this.$YsMessage.error("获取数据失败")
        })
    },
    // 获取时间
    handleChange(time) {
      this.params.start_time = `${time[0]} 00:00:00`
      this.params.end_time = `${time[1]} 23:59:59`
    },
  },
};
</script>

<style lang="less" scoped>
.layout {
  height: 100%;
  box-sizing: border-box;
  padding-bottom: 15px;
  &-header {
    width: 100%;
    border: 1px solid #cfd7e5;
    display: flex;
    align-items: center;
    border-radius: 4px;
    margin-bottom: 8px;
    height: 72px;
    padding: 0 16px;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    &-date {
      margin-right: 11px;
    }
    &-btn {
      margin-left: 10px;
    }
  }
  &-container {
    height: calc(100% - 80px);
    overflow: auto;
    padding: 20px 40px;
    background: #fff;
    border-radius: 4px;
    border: 1px solid #ccc;
    .container-main {
      border: 1px solid #ccc;
      padding: 15px 30px;
    }
  }
  &-nodata {
    height: calc(100% - 100px);
    background: #fff;
    border-radius: 4px;
    border: 1px solid #ccc;
    position: relative;
    .default-box {
      position: absolute;
      left: 50%;
      top: 50%;
      margin: -125px 0 0 -130px;
      p {
        margin-top: 10px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        font-size: 14px;
        color: #333333;
      }
      .default-img {
        width: 250px;
        height: 260px;
      }
    }
  }
}
</style>
